<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>答题</title>
	</head>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/test/css/Hui.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/test/css/style.css" />
	<style>
		.font {
			font-family: "微软雅黑";
			font-size: 18px;
		}
		
		.d1{
			position: relative;z-index: 0; padding: 80px 0px;width: 200px;
		}
		
		.p1{
			position: absolute;top: 60px;z-index: 10; width: 100%;
		}
	</style>

	<body>
		<div class="H-width-100-percent H-center-all" style="background-image: url(__PUBLIC__/test/img/答题_02.png);background-size: 100% 100%;">
			<div class="d1 H-font-size-18 H-theme-font-color-white" style="">
				<img src="__PUBLIC__/test/img/答题_07.png" class="H-width-100-percent"/>
				<div class="p1 H-text-align-center H-font-size-24" style="">
					<p>第<span id ='number'></span>题</p>
				</div>
			</div>
		</div>
		<div id="contents" class="H-padding-horizontal-both-10 H-theme-font-color-444 H-font-size-12">
		</div>
		<div style="padding:25px 100px;">
			<button id="next" class=" font H-width-100-percent H-theme-background-color11 H-border-none H-border-radius-15 H-font-size-18 H-theme-font-color-white H-padding-vertical-both-5 H-padding-horizontal-both-25">
			下一题		</button>
		</div>
	</body>
	<script id="demo" type="text/html">
		<p id ="title" class="font H-padding-horizontal-both-10">{{ d.title }}</p>
		{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
		<div class="H-flexbox-horizontal H-padding-horizontal-right-25 H-padding-vertical-bottom-10 H-font-size-120">
			<div class="H-flex-item">
				<span class="font" >{{ d.list[i].answer }}</span>
			</div>
			<input type="radio" name="test" value="{{i}}" class="H-radio H-vertical-align-middle H-checkbox-fill H-font-size-18 H-theme-font-color4 H-border-radius-circle " />
		</div>
		{{# } }}
	</script>
	<script type="text/javascript" src="__PUBLIC__/test/js/jquery.js"></script>
	<script type="text/javascript" src="__PUBLIC__/test/js/laytpl.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {

		});
		//遍历题目
		function test_content(i,a) {
			$('#number').text(i+1);
			var data = {
				title: a[i].testdb_content,
				list: []
			};
			if(''!=a[i].testdb_answer1 && null!=a[i].testdb_answer1){
				data.list.push({answer:a[i].testdb_answer1});
			}
			if(''!=a[i].testdb_answer2 && null!=a[i].testdb_answer2){
				data.list.push({answer:a[i].testdb_answer2});
			}
			if(''!=a[i].testdb_answer3 && null!=a[i].testdb_answer3){
				data.list.push({answer:a[i].testdb_answer3});
			}
			if(''!=a[i].testdb_answer4 && null!=a[i].testdb_answer4){
				data.list.push({answer:a[i].testdb_answer4});
			}
			var gettpl = document.getElementById('demo').innerHTML;
			laytpl(gettpl).render(data, function(html){
				document.getElementById('contents').innerHTML = html;
			});
		}

		$(document).ready(function() {
			var i =0;
			var value = new Array();
			var a = eval('<?php echo json_encode($result);?>');
			test_content(i,a);
			$("#next").click(function() {
				
				var input = document.getElementsByName('test');
				var flag = false;
				for(var j = 0; j < input.length; j++){
					if(input[j].checked){
						flag = true;
						var sw = parseInt(input[j].value);
						switch (sw){
							case 0:
								value.push('A');
								break;
							case 1:
								value.push('B');
								break;
							case 2:
								value.push('C');
								break;
							case 3:
								value.push('D');
						}	
					}
				}
				if(!flag){
					alert("请您选择一个答案");
				}else{
						if(i<19){
							//alert(value);
							i++;
							test_content(i,a);
						}else{
							var answer = eval('<?php echo json_encode($answer);?>');
							var score = 0;
							for(var k =0; k<answer.length;k++){
								if(value[k] == answer[k]){
									score++;
								}
							}
							//alert("score:"+score);
							if(score != 20){
								window.location= "{:U('answer_result')}?score="+score;
							}else{
								window.location="{:U('exam_pass')}";
							}

						}
				}
			});
		});

	</script>
</html>